<template>
    <div class="ad">
        <div class="notice-header">
            <span>最新公告</span>
        </div>
        <div class="notice-list" v-loading="loading">
            <div v-if="notices.size == 0" class="no-data">
                暂无公告
            </div>
            <div class="notice-item" v-if="notices.size != 0" v-for="item, index in notices" :key="index">
                <div class="notice-title">
                    <span>{{ item.noticeTitle }}</span>
                </div>
                <div class="notice-content">
                    <span>{{ item.noticeContent }}</span>
                </div>
                <div class="notice-time">
                    <span>{{ parseTime(item.createTime) }}</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { reqNewNotice, reqNoticeList } from "@/api"

export default {
    name: 'my-notice',
    data() {
        return {
            loading: false,
            notices: []

        }
    },
    created() {
        this.getList()
    },
    methods: {
        getList() {
            this.loading = true
            reqNoticeList({
                pageNum: 1,
                pageSize: 1000
            }).then(response => {
                this.notices = response.rows
                this.loading = false
            })
        },
        parseTime(time) {
            if (!time) return ''
            const date = new Date(time)
            return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
        }
    }
}
</script>

<style scoped>
.ad {
    background: #fff;
    border-radius: 4px;
}

.notice-header {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    font-size: 16px;
    font-weight: bold;
    color: #303133;
}

.notice-header i {
    margin-right: 8px;
    color: #409EFF;
}

.notice-list {
    min-height: 100px;
}

.notice-item {
    padding: 10px 0;
    border-bottom: #f4ebeb 1px solid;
}

.notice-item:last-child {
    border-bottom: none;
}

.notice-title {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
    font-size: 16px;
}

.notice-title span {
    color: #606266;
    font-weight: 600;
}

.notice-time {
    font-size: 12px;
    color: #909399;
}

.no-data {
    text-align: center;
    color: #909399;
    padding: 30px 0;
}

.notice-content{
    font-size: 14px;
    margin-top: 10px;
    margin-bottom: 10px;

}
</style>